<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="mount-point">
        <local2></local2>
    </div>
</body>

<script>
    // // 创建构造器,extend 也可以创建一个实例，只不过没有绑定 el元素
    // var Profile = Vue.extend({
    //     template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    //     data: function () {
    //         return {
    //             firstName: 'Walter',
    //             lastName: 'White',
    //             alias: 'Heisenberg'
    //         }
    //     }
    // })

    // // 创建 Profile 实例，并挂载到一个元素上。
    // new Profile().$mount('#mount-point')

    //创建全局组件,组件的定义可复用vue实例
    Vue.component('name',{
        template:'',
        methods:{

        }
    });
    // 以上是 下面的简写
    // Vue.component('name',Vue.extend({
    //     template:'',
    //     methods:{
    //     }
    // }));

    let local={
        template:'<h1>标题</h1>'
    }

    //Vue.extend 经常可以省略
    let local2=Vue.extend({
        template:'<h1>标题2</h1>'
    })

    // el 可以后续设置不？
    new Vue({
        el:"#mount-point",
        data:{
           message:"我是数据"
        },
        components:{
            local,
            local2
        }
    });
</script>

</html>